<template>
  <section>
    <div class="btn1 c-flex-row c-aligni-center c-justify-sb c-hh48 c-lh48 ww248" v-if="btnType == 1">
      <div class="c-ww160 c-fc-white c-textAlign-c c-fw-b" :class="item.payType == 2 ? 'c-fs28' : 'c-fs24'">
        <template v-if="item.payType == 1 || (item.marketingType && item.marketingType == 3 && item.reservePrice == 0)">免费</template>
        <template v-else-if="item.payType == 3">加密</template>
        <template v-else-if="item.payType == 5">指定购买</template>
        <template v-else-if="item.payType == 6">指定学员</template>
        <template v-else><span class="c-fs20" v-if="getPrice(item) != 0">{{'￥' | iosPriceFilter}}</span><span v-html="$getPriceStyleHtml(getPrice(item))"></span></template>
      </div>
      <div class="fc-EB3E3C c-fs20 c-fw-b c-pr24">抢购</div>
    </div>
    <div class="btn2 c-flex-row c-aligni-center c-justify-sb c-hh48 c-lh48 ww248" v-else-if="btnType == 2">
      <div class="c-ww160 c-fc-white c-textAlign-c c-fw-b" :class="item.payType == 2 ? 'c-fs28' : 'c-fs24'">
        <template v-if="item.payType == 1 || (item.marketingType && item.marketingType == 3 && item.reservePrice == 0)">免费</template>
        <template v-else-if="item.payType == 3">加密</template>
        <template v-else-if="item.payType == 5">指定购买</template>
        <template v-else-if="item.payType == 6">指定学员</template>
        <template v-else><span class="c-fs20" v-if="getPrice(item) != 0">{{'￥' | iosPriceFilter}}</span><span v-html="$getPriceStyleHtml(getPrice(item))"></span></template>
      </div>
      <div class="fc-D11618 c-fs20 c-fw-b c-pr24">马上买</div>
    </div>
    <div class="c-p" v-else-if="btnType == 3">
      <div class="c-ww132 c-fc-xblack c-lh32 c-fw-b" :class="item.payType == 2 ? 'c-fs28' : 'c-fs24'">
        <template v-if="item.payType == 1 || (item.marketingType && item.marketingType == 3 && item.reservePrice == 0)">免费</template>
        <template v-else-if="item.payType == 3">加密</template>
        <template v-else-if="item.payType == 5">指定购买</template>
        <template v-else-if="item.payType == 6">指定学员</template>
        <template v-else><span class="c-fs20" v-if="getPrice(item) != 0">{{'￥' | iosPriceFilter}}</span><span v-html="$getPriceStyleHtml(getPrice(item))"></span></template>
      </div>
      <div class="btn3 c-ww120 c-fc-white c-fs20 c-fw-b c-pr30 c-hh52 c-lh40 c-pl16 c-pa c-p-b0 c-p-r0 mb-4">马上抢</div>
    </div>
    <div class="btn4 c-flex-row c-aligni-center c-justify-sb c-hh48 c-lh48 ww248" v-else-if="btnType == 4">
      <div class="c-ww160 c-fc-white c-textAlign-c c-fw-b" :class="item.payType == 2 ? 'c-fs28' : 'c-fs24'">
        <template v-if="item.payType == 1 || (item.marketingType && item.marketingType == 3 && item.reservePrice == 0)">免费</template>
        <template v-else-if="item.payType == 3">加密</template>
        <template v-else-if="item.payType == 5">指定购买</template>
        <template v-else-if="item.payType == 6">指定学员</template>
        <template v-else><span class="c-fs20" v-if="getPrice(item) != 0">{{'￥' | iosPriceFilter}}</span><span v-html="$getPriceStyleHtml(getPrice(item))"></span></template>
      </div>
      <div class="fc-C8872F c-fs20 c-fw-b c-pr32">购买</div>
    </div>
    <div class="c-ww140 c-hh48 c-lh48 c-fc-white c-textAlign-c c-fs20 btn1_1 c-br24 c-fw-b" v-else-if="btnType == 5">立即抢购</div>
    <div class="c-ww120 c-hh48 c-lh48 c-fc-white c-pl12 c-fs20 btn2_1 c-fw-b" v-else-if="btnType == 6">马上买</div>
    <div class="c-ww120 c-hh56 c-lh48 c-fc-white c-pl20 c-fs20 btn3_1 c-fw-b" v-else-if="btnType == 7">马上抢</div>
    <div class="c-ww132 c-hh48 c-lh48 c-fc-white c-pl14 c-fs20 btn4_1 c-fw-b" v-else-if="btnType == 8">马上购买</div>
  </section>
</template>
<script>
export default {
  name: 'activitemyWindowButton',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    btnType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ckfrom: global.ckFrom,
    };
  },
  watch: {
  },
  computed: {
    // 获取展示价格
    getPrice() {
      return function (item) {
        // marketingType 1=限时购;2=拼团;3=砍价
        let price = item.prodType == this.ckfrom.shareholderPayVoucher ? item.salePrice : item.prodPrice;
        if (item.marketingType == 1) {
          price = item.price;
        } else if (item.marketingType == 2) {
          price = item.captainPrice;
        } else if (item.marketingType == 3) {
          price = item.reservePrice;
        }
        if (item.optimal && item.optimal.optimalPrice > 0 && item.optimal.optimalPriceType != 1) {
          price = item.optimal.optimalPrice;
        }
        return price;
      }
    },
  },
  created() {
  },
  methods: {
    // 跳转详情
    linkToDetail() {
      this.$emitem('linkToDetail')
    }
  },
};
</script>

<style scoped>
.fc-EB3E3C {
  color: #EB3E3C;
}
.fc-D11618 {
  color: #D11618;
}
.fc-C8872F {
  color: #C8872F;
}
.btn1 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.btn2 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.btn3 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn3.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.btn4 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.btn1_1 {
  background-image: linear-gradient(180deg, #FF7F40 2%, #EB3431 100%);
  box-shadow: 0 0.1rem 0.2rem 0 #ff21144d;
}
.btn2_1 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn2_1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.btn3_1 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn3_1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.btn4_1 {
  background-image: url('https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/awBtn4_1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.ww248 {
  width: 6.2rem;
}
</style>